<template lang="pug">
  .scene.pos-r(v-show="showScene && sceneList", @touchstart="handleToggleTouch")
    Scroll.scene-wrap(:data="getSceneList", :scrollX="true", :probe-type="3", ref="scrollSceneWrap")
      ul.scene-list(ref="sceneListWrap")
        li.scene-list-item(
          v-for="(item, index) in getSceneList",
          ref="sceneItem",
          :title='item.title',
          :key="index",
          :style="[getComsumerStyle, sceneIndex == index ? getBdColorStyle : '']",
          :class="['item', {'active': sceneIndex == index && !item.isLock}]",
          @click.stop.prevent="handleSceneSwitch(item, index)")
          .info(v-if="item.dec")
            i.iconfont.icon-info(@click.stop="showSceneInfo(item.title, item.dec)")
          .lock(v-if="item.isLock")
            i.iconfont.icon-lock
          .img-box
            img(:style="getComsumerStyle", :src="item.full_thumb_url", alt="")
          .text.omit
            p(ref="text", :style="sceneIndex == index ? getColorStyle : ''") {{item.title}}
            //- , sceneIndex == index ? getBdColorStyle : ''
            //- (:style="sceneIndex == index ? getColorStyle : ''")

    Scroll.group-wrap(v-if='getSceneGroup && showSceneGroup', :data="getSceneGroup", :scrollX="true", ref="scrollGroupWrap")
      ul.scene-group(
        v-if="getSceneGroup",
        ref="sceneGroupWrap")
        li.scene-group-item(
          ref="sceneGroupItem",
          v-for="(group, index) in getSceneGroup",
          :key="index",
          :title="group.album",
          @click="handleGroupSwitch(group.groupid, index)")
          span.label.omit(
            :class="{'active': sceneGroupIndex == index}",
            :style="[sceneGroupIndex == index ? getBdColorStyle : '', sceneGroupIndex == index ? getColorStyle : '']") {{group.album}}
            //- (
            //- :class="{'active': sceneGroupIndex == index}",
            //- :style="sceneGroupIndex == index ? getBgColorStyle : '' ")
</template>

<script>
import Scroll from 'Comps/Scroll'
import themeMixin from '@/mixins/theme'
import sceneMixin from '@/mixins/scene'
import { mapGetters } from 'vuex'
import {
  handleSceneWidth
} from '@/utils/scene'

export default {
  name: 'sceneGroup',
  mixins: [themeMixin, sceneMixin],
  components: {
    Scroll
  }
}
</script>

<style lang="stylus">
@import '../../../assets/styles/scene.styl'
.theme-app-copya
  .scene
    .scene-wrap
      min-height: 70px
      // text-align: center
    .scene-list
      .scene-list-item
        width: 70px
        height: 70px
        border-width 2px !important
        border 2px solid #ffffff
        &.active
          border 2px solid #58b7ff
        & > .lock
          line-height: 70px
        & > img, .lock
          top: 0
          left: 0
        .text
          background-color: rgba($black,.5)

    .scene-group
      height: 20px
      .scene-group-item
        height: 20px
        span
          min-width: 50px
          padding: 0 10px
          height: 20px
          line-height: 20px
          border-radius: 0px !important
          font-size: 12px
          &.label
            background-color transparent
            border 0
            border-bottom 2px solid rgba(255,255,255,0)
          &.active
            color #58b7ff
            border-bottom 2px solid #58b7ff
            border-width 2px !important
            border-top 0 !important
            border-left 0 !important
            border-right 0 !important

// .new-template-app
//   .scene
//     .scene-group
//       .scene-group-item
//         span
//           border-radius: 4px
</style>
